Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

201
Views
I try to delete a targeted element front-end side and have it removed from the db as well but doesn't work [Vue.js + vuetify + firestore]

I created a to-do list kind of app that is connected to a db on firestore.

I have a form that adds a new document to the list, both front-end and db and it works,

I have a method that listens to the changes in the db and updates the document in the browser and it works.

So I see that I manage to refer to the collection in the db and save it in variables, but it is only reactive to deleting documents if I do it manually from firebase website.

Here is the method that I am trying to use

  removeObject(id){
    const db = getFirestore(app);
      console.log("test")
     deleteDoc(doc(db, "Listify", doc(id));
  }

And here is the way I'm calling it in HTML

    <v-card  flat v-for="project in projects" :key="project.id">
      <v-layout row justify-end wrap :class="`pa-3 project ${project.status}`">
        ...
        ...
        <v-flex xs6 sm4 md2  class="text-center-xs">
          <div class="right text-center">
            <v-chip small :class="`${project.status} white--text caption my-2`"> {{project.status}}</v-chip>
            <v-btn flat fab small dark class="red" @click="removeObject(project.id)"> 
               <v-icon small class="pa-0">delete</v-icon>
            </v-btn>
          </div>
        </v-flex>
      </v-layout>
        <v-divider></v-divider>

    </v-card>

I tried to refer to the doc id in the method in many ways, but it only works when I hard code the id for that document, and even in that case it deletes the last item of the array "projects" that I defined in the data section of the app, and then when I refresh the page, that last item comes back and the one with the id that I hardcoded is actually deleted.

I tried calling "removeObject(id)" as async and use await on "deleteDoc(.....)" but still does not work,

I thought about looping the collection but I would not know the right way to do it, and finally in firebase official repo in githhub I only found this syntax "await deleteDoc(doc(db, "cities", "DC"));"

Which did not help me as it only works with specific Ids or doc names;

How could I delete, clicking on the button that calls the delete method, remove that specific item I targeted both client and db side?

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!